<template>
  <div class="translate">
	  <div class="title">{{ title }}</div>
	  <div class="addWeb_content">
		  <van-cell-group>
			<p class="ftitle">需要翻译的字符</p>
			<van-field style="font-size: 16px;" @keydown.enter="translateFn($event)"
			  v-model="translateWord"
			  rows="5"
			  type="textarea"
			  placeholder="请输入翻译内容"
			/>
			<p class="ftitle">翻译结果</p>
		    <van-field id="translateRes" style="font-size: 16px;"
		      v-model="translateRes"
		      rows="5"
		      type="textarea"
		      placeholder="翻译结果"
		    />
		  </van-cell-group>
		  <div class="btn_groups">
			  <van-button class="fl" @click="translateFn" type="primary">点击翻译</van-button>
			  <van-button class="fr" @click="copyDataFn" type="info">复制结果</van-button>
		  </div>
	  </div>
  </div>
</template>

<script>
import { Button,Field,Toast } from 'vant'
import { jsonp } from "~js/tools.js"
	
export default {
  name: 'addWeb',
  components:{
	 [Button.name]:Button,
	 [Field.name]:Field,
	 [Toast.name]:Toast
  },
  data(){
	  return {
		  translateWord:"",
		  translateRes:""
	  }
  },
  props: {
     title:{
		 type:String,
		 default:"添加本地收藏"
	 },
	 translateApi:{
		 type:Object,
		 default:()=>{
			 return {}
		 }
	 }
  },
  mounted(){
	this.preDataDom=document.getElementById('translateRes')  
  },
  methods:{
	  translateFn(e){
		  e.preventDefault()
		  if(!this.translateApi.appId || !this.translateApi.key){
			  this.$dialog.confirm({
			    title: '提示',
				confirmButtonText:"前往",
			    message: '请填写完整您的APP ID和密钥，如未申请，请前往百度开发者中心申请翻译接口！'
			  }).then(() => {
			     window.open('https://api.fanyi.baidu.com/')
			  })
			  return
		  }
		  if(!this.translateWord){
			  Toast('请输入翻译内容！')
			  return
		  }
		  var appid = this.translateApi.appId;
		  var key = this.translateApi.key;
		  var salt = (new Date).getTime();
		  var query = this.translateWord;
		  var from = 'auto';
		  var to =/[\u4e00-\u9fa5]/g.test(query) ? 'en' : "zh";
		  var str1 = appid + query + salt +key;
		  var sign = md5(str1);
		  var apiLink=window.location.protocol=="https:" ? this.translateApi.httpsApi : this.translateApi.httpApi 
		  
		  jsonp(apiLink,{
			  q: query,
			  appid: appid,
			  salt: salt,
			  from: from,
			  to: to,
			  sign: sign
		  },(data)=>{
			  if(data.trans_result){
				  this.translateRes=data.trans_result[0].dst
			  }else{
				  console.log(data)
				  Toast('翻译接口出错，请重试！');
			  }
		  })
	  },
	  copyDataFn(){
		  if(!this.translateRes) return
		  try{
		  	var range=document.createRange()
			range.selectNode(this.preDataDom)
			window.getSelection().removeAllRanges()
			window.getSelection().addRange(range)
			document.execCommand('copy')
			window.getSelection().removeAllRanges()
			Toast('复制成功！');
		  }catch(e){
		  	Toast('复制失败，请手动复制！');
		  }
	  }
  },
  watch:{
	  translateWord(newVal,oldVal){
		  if(newVal==""){
			  this.translateRes=""
		  }
	  }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.translate{
	background: rgba(255,255,255,0.8);
	margin-bottom: 15px;
	.addWeb_content{
		padding:0px 15px 20px 15px;
	}
	.title{
		font-size: 18px;
		color: #333;
		line-height: 30px;
		padding: 10px 20px;
		border-bottom: 1px #aaa solid;
		box-shadow: 0 5px 20px #aaa;
	}
	.ftitle{
		font-size: 16px;
		line-height: 2em;
		margin: 10px 0 6px 0;
	}
	.van-tag{
		margin: 6px 10px 4px 0;
		cursor: pointer;
	}
	.van-cell{
	   padding: 8px 10px;	
	   border-radius: 5px;
	}
	.btn_groups{
		margin-top: 20px;
		overflow: hidden;
		.van-button{
			border-radius: 5px;
			width: 47%;
		}
	}
}
</style>
